<template>
  <view>
    <view class="couponWindow" :class="value ? 'on' : ''">
      <view class="boxwrapper">
        <image v-if="info" class="slide-image" :src="info.wap_poster" mode="widthFix" />
        <view class="getCopBtn" @click="saveImg">保存海报</view>
      </view>
      <view class="closeIcon">
        <u-icon name="close-circle" color="#ffffff" size="28" @click="close"></u-icon>
      </view>
    </view>
    <view class="mask" @touchmove.prevent :hidden="!value"></view>
  </view>
</template>
<script>
import { mapGetters } from 'vuex'
import { getSpreadImg } from '@/api/user'

export default {
  name: 'CouponWindow',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      info: null,
    }
  },
  computed: mapGetters(['isLogin']),
  methods: {
    // 海报地址
    getIndex() {
      getSpreadImg({
        from:
          this.$deviceType == 'weixin' || this.$deviceType == 'weixinh5'
            ? 'uniappH5'
            : this.$deviceType,
      }).then(
        res => {
          if (res.data && res.data.length) {
            this.info = res.data[0]
          }
        },
        err => {
          uni.showToast({
            title:
              err.msg || err.response.data.msg || err.response.data.message,
            icon: 'none',
            duration: 2000,
          })
        }
      )
    },
    // 保存海报
    saveImg() {
      this.downloadFile(this.info.wap_poster)
    },
    downloadFile(url) {
      uni.showModal({
        title: '提示',
        content: '保存到本地',
        success(e) {
          if (e.confirm) {
            console.log("url="+url)
            uni.downloadFile({
              url,
              fail(err) {
                console.log(err)
                uni.$u.toast('保存失败1')
              },
              success(res) {
                uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success() {
                    uni.$u.toast('已保存到系统相册')
                    this.close()
                  },
                  fail(err) {
                    console.error('保存到相册失败:', err);
                    uni.$u.toast('保存到相册失败')
                    // if (err.errMsg.includes('privacy')) {
                    //   uni.showModal({
                    //     title: '提示',
                    //     content: '需要您同意隐私协议才能保存图片',
                    //     confirmText: '去同意',
                    //     success: (res) => {
                    //       if (res.confirm) {
                    //         wx.openSetting(); // 打开设置页面
                    //       }
                    //     }
                    //   });
                    // }
                  },
                })
              },
            })
          }
        },
        fail() {
          uni.$u.toast('保存失败3')
        },
      })
    },
    close() {
      this.$emit('close', false)
    },
  },
  mounted() {
    this.getIndex()
  },
}
</script>
<style lang="scss" scoped>
/*首页优惠券弹窗*/
.couponWindow {
  // background-image: url('https://wx.yixiang.co/static/images/coupon-window.png');
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  width: calc(100vw - 144rpx);
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
  transform: translate3d(-50%, -200%, 0);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.couponWindow.on {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.closeIcon {
  position: fixed;
  top: -100rpx;
  right: 0;
  z-index: 100;
}

.boxwrapper {
  overflow: hidden;

  .getCopBtn {
    margin: 48rpx auto 0;
    width: 368rpx;
    height: 88rpx;
    background: linear-gradient(90deg, #fff6d3 0%, #ffeea9 100%);
    border-radius: 44rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #f53c36;
    line-height: 88rpx;
    text-align: center;
    font-style: normal;
  }

  image {
    border-radius: 32rpx;
    width: 100%;
  }
}
</style>
